<template>
  <div class="scroll-container" ref="scrollContainer">
    <transition-group name="scroll" tag="div" class="scroll-content">
      <div v-for="(item, index) in visibleItems" :key="item" class="scroll-item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      visibleItems: [],
      currentIndex: 0
    };
  },
  mounted() {
    this.visibleItems = this.items.slice(0, 3); // Initially show first 3 items
    setInterval(this.scroll, 2000); // Scroll every 2 seconds
  },
  methods: {
    scroll() {
      // Remove the first item and add the next one in a circular manner
      const removedItem = this.visibleItems.shift();
      this.visibleItems.push(removedItem);
      // Update index for tracking purposes
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    }
  }
};
</script>

<style>
.scroll-container {
  width: 300px; /* Adjust as needed */
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
}

.scroll-content {
  display: flex;
}

.scroll-item {
  width: 100px; /* Adjust as needed */
  flex-shrink: 0;
  text-align: center;
  line-height: 50px; /* Adjust as needed */
  border-right: 1px solid #ccc;
}

.scroll-enter-active, .scroll-leave-active {
  transition: transform 0.5s;
}

.scroll-enter {
  transform: translateX(100%);
}

.scroll-leave-to {
  transform: translateX(-100%);
}
</style>